import React, { useState } from 'react'
import { ArrowLeft } from '@react-vant/icons';
import imsg from '../img/完成.png'
import imagest from '../img/取消.png'
import { useParams, useLocation } from 'react-router-dom'
import { Button } from 'antd-mobile';
type Props = {}

function Classfiy({ }: Props) {
    const god = () => {
        window.history.back()
    }
    const { state } = useLocation()
    return (
        <div className='ordesds'>
            <div className="order-details" style={{
                width: '100%',
                height: '250px',
                margin: '0 auto',
                background: 'rgb(27, 169, 186)',
                borderRadius: '0 0 15px 15px'
            }}>
                <div className="order-detailsHeader" style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    textAlign: 'center',
                    padding: '15px 6px 0 15px',
                }}>
                    <div onClick={god} className="order-detailsLeft" style={{ color: '#ffffff', fontSize: "20px" }}><ArrowLeft /></div>
                    <div className="order-detailsRight" style={{ color: '#ffffff', fontSize: "18px" }}>订单详情</div>
                    <div></div>
                </div>

                {
                    state.state === '待支付' ? <div className="xqnonav">
                        <h3 style={{ fontSize: "20px", color: "red", marginLeft: "10px" }}>
                            {state.state}
                        </h3>
                        <p>
                            <span style={{ fontSize: "18px", marginRight: "5px", color: "#000" }}>支付时间</span>
                            <span style={{ fontSize: "18px", color: "#FF7A00", marginRight: "10px" }}>58:09分</span>
                        </p >
                    </div> : <div className="order-detailsCenten" style={{
                        display: 'flex', justifyContent: 'flex-start', padding: '5px 20px', marginTop: '20px'
                    }}>
                        <img src={state.state === '购票成功' ? imsg : imagest} alt="" className='order-detailsImages' />
                        <div className="order-detailsCentenLeft" style={{ marginLeft: '10px' }}>
                            <div className='ticket-issuedSuccessfully' style={{ fontSize: "24px", color: '#ffffff' }}>{state.state}</div>
                            <div style={{ marginTop: '5px', fontSize: "12px", color: '#ffffff' }}>请您持购证件在车站或代售点取票后按时乘车</div>
                        </div>
                    </div>
                }
            </div>
            <div className="order-forGoods" style={{ width: '97%', height: '37%', zIndex: '999', position: 'relative', top: '-110px', margin: '0 auto', borderRadius: '10px', background: '#ffffff', }}>
                <div className="order-forGoodsPadding" style={{ width: '94%', height: '98%', margin: '0 auto' }}>
                    <div className="order-forGoodsName" style={{ padding: '15px 0px', color: 'rgb(41 39 39)' }}>
                        取票号:BW123455
                    </div>
                    <div className="order-forGoodsDate" style={{ display: 'flex', justifyContent: 'space-between', color: '#ccc' }}>
                        <div>06月15日周二</div>
                        <div>06月15日周二</div>
                    </div>
                    <div className="order-forGoodsTime" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'black', fontSize: '25px', }}>
                        <div style={{ fontWeight: '600' }}>06：24</div>
                        <div className='stopj' >经停信息</div>
                        <div style={{ fontWeight: '600' }}>07：21</div>
                    </div>
                    <div className="order-forGoodslocation" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'rgb(41 39 39)' }}>
                        <div>{state.city}</div>
                        <div>{state.train}</div>
                        <div>{state.citys}</div>
                    </div>
                    <div className="order-forGoodsInformation">
                        <div className="order-forGoodsTitle" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'black', fontSize: '18px', fontWeight: '800' }}>
                            <div>{state.name}<span style={{ color: '#ccc', border: '1px solid #ccc', padding: '3px 3px', fontSize: '12px', marginLeft: '5px' }}>成人票</span></div>
                            <div>一等座￥{state.price}</div>
                        </div>
                        <div className="order-forGoodsCenter" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: '#ccc' }}>
                            <div>身份证 110102**********28</div>
                            <div><span style={{ color: 'green', border: '1px solid green', padding: '3px 3px', fontSize: '12px', marginRight: '5px' }}>靠窗</span>{state.railway}车厢{state.wagon}号</div>
                        </div>
                        <div style={{ marginTop: '10px', color: state.state === '购票成功' ? "#1d953f" : '#000' && state.state === '待支付' ? 'red' : "#000" }}>{state.state}</div>
                    </div>
                </div>
            </div>
            <div className="order-No." style={{ width: '97%', height: '15%', background: '#ffffff', margin: '0 auto', borderRadius: '10px', marginTop: '-95px' }}>
                <div className="order-No.Ti" style={{ display: 'flex', justifyContent: 'space-between', padding: '20px 11px', color: 'rgb(41 39 39)' }}>
                    <div>订单号</div>
                    <div>E369941878</div>
                </div>
                <div className="order-No.Phone" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 11px', color: 'rgb(41 39 39)' }}>
                    <div>通知手机</div>
                    <div>188123456789</div>
                </div>
            </div>
            <div className="ADULT" style={{ width: '97%', height: '15%', background: '#ffffff', margin: '0 auto', borderRadius: '10px', marginTop: '15px' }}>
                <div className="ADULT-vote" style={{ display: 'flex', justifyContent: 'space-between', padding: '20px 11px', color: 'rgb(41 39 39)' }}>
                    <div>成人票</div>
                    <div>￥{state.price}x1</div>
                </div>
                <div className="order-amount" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 11px', color: 'rgb(41 39 39)' }}>
                    <div>订单总计</div>
                    <div style={{ color: 'orange', fontSize: '23px' }}>￥{state.price}</div>
                </div>

            </div>
            {
                state.state === '购票成功' ? '' : <button

                    style={{ marginTop: "30px" }}
                    className="btn">
                    {
                        state.state === '待支付' ? "待支付" : "重新订购"
                    }
                </button>
            }

        </div >
    )
}

export default Classfiy
